// @ts-nocheck
import { apply, applyStyle } from 'ol-mapbox-style'

// pnpm install ol-mapbox-style
// https://github.com/openlayers/ol-mapbox-style
//     https://codesandbox.io/examples/package/ol-mapbox-style
//         https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html
import type { Map } from 'ol'
// import VectorTileSource from 'ol/source/VectorTile'
// import MVT from 'ol/format/MVT'
// import { MapboxVectorLayer } from 'ol-mapbox-style'
// import { Group as LayerGroup } from 'ol/layer.js'
import VectorTile from 'ol/layer/VectorTile'

export function addVectorTile(map: Map) {
    // // 世界范围
    // const url_vector = 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer'
    // // 加载矢量瓦片图层
    // const vectorLayer = new VectorTile({
    //     source: new VectorTileSource({
    //         format: new MVT(),
    //         url: `${url_vector}/tile/{z}/{y}/{x}.pbf`,
    //         // // 设置坐标参考系
    //         // projection: projection,
    //         // // 设置分辨率
    //         // tileGrid: tilegrid,
    //     }),
    // })
    // map.addLayer(vectorLayer)

    // const url_vector = 'https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer'
    // // // 加载矢量瓦片图层
    // // const vectorLayer = new VectorTile({
    // //     source: new VectorTileSource({
    // //         format: new MVT(),
    // //         url: `${url_vector}/tile/{z}/{y}/{x}.pbf`,
    // //         // // 设置坐标参考系
    // //         // projection: projection,
    // //         // // 设置分辨率
    // //         // tileGrid: tilegrid,
    // //     }),
    // // })
    // // map.addLayer(vectorLayer)
    //
    // // const vectorLayer = new VectorTile({ declutter: true })
    // // // applyStyle(layer, 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN');
    // // setArcgisMvtStyle(url_vector, vectorLayer)

    const baseUrl = 'http://106.15.40.105:8090/iserver/services/map-mvt-China4326MVT/restjsr/v1/vectortile/maps/China4326MVT'
    // const vectorLayer = new VectorTile({
    //     declutter: true,
    //     source: new VectorTileSource({
    //         url: `${baseUrl}/tiles/{z}/{x}/{y}.mvt`,
    //         format: new MVT(),
    //         projection: 'EPSG:4326',
    //     }),
    // })
    // map.addLayer(vectorLayer)
    const styleJsonUrl = baseUrl + '/style.json'
    fetch(styleJsonUrl).then((result) => result.json()).then((styleResult) => {
        console.log('styleResult', styleResult)
        // applyStyle(vectorLayer, styleResult) // 可以设置行政区划数据样式：线面，未看到点、文本

        // 可以加载，文本、线、面均可以加载
        // apply(map, styleJsonUrl, {
        //     projection: 'EPSG:4326', // 设置矢量瓦片坐标系
        // })
        for (const layer of styleResult.layers) {
            // 设置矢量瓦片背景图层的颜色为透明，否则会遮挡图层
            if (layer.type === 'background') {
                layer.paint['background-color'] = 'rgba(255,255,255,0.00)'
            }
        }
        // const layerGroup = new LayerGroup()
        // map或layerGroup都行，好像map渲染速度更快
        apply(map, styleResult, {
            projection: 'EPSG:4326', // 设置矢量瓦片坐标系
        })
        // map.addLayer(layerGroup)

        // 无法设置
        // stylefunction(vectorLayer, styleResult, new VectorTileSource({
        //     url: `${baseUrl}/tiles/{z}/{x}/{y}.mvt`,
        //     format: new MVT(),
        //     projection: 'EPSG:4326',
        // }))
    })
}

// function addSuperMapMvtStyle(baseUrl: string, vectorLayer: VectorTile) {
//     applyStyle(vectorLayer, baseUrl)
// }

export function setArcgisMvtStyle(baseUrl: string, vectorLayer: VectorTile) {
    console.log('applyStyle', applyStyle)
    console.log('vectorLayer', vectorLayer)
    console.log('baseUrl', baseUrl)

    const requestStyleUrl = `${baseUrl}/resources/styles`
    applyStyle(vectorLayer, requestStyleUrl)

    // let resolutionUrl = `${baseUrl}/resources`
    // let requestStyleUrl = `${resolutionUrl}/styles${baseUrl.includes('?') ? '&f=pjson' : '?f=pjson'}`
    // fetch(requestStyleUrl).then((result) => result.json()).then((styleResult) => {
    //     console.log('styleResult', styleResult)
    //
    //     styleResult.glyphs = `${resolutionUrl}/fonts/{fontstack}/{range}.pbf`
    //     styleResult.sprite = `${resolutionUrl}/sprites/sprite`
    //     console.log('styleResult.layers[0]', styleResult.layers[0])
    //
    //     for (const layerStyle of styleResult.layers) {
    //         layerStyle.version = 8
    //         // applyStyle(vectorLayer, layerStyle, 'esri')
    //         applyStyle(vectorLayer, requestStyleUrl)
    //         // stylefunction(vectorLayer, layerStyle, 'esri')
    //     }
    // })
}